<template>
    <div class="default-content">
        <div class="welcome-section">
            <el-card class="welcome-card">
                <template #header>
                    <div class="card-header">
                        <span>欢迎使用MES管理系统</span>
                    </div>
                </template>
                <div class="welcome-content">
                    <p>请从左侧菜单选择要管理的功能模块</p>
                    <el-divider />
                    <div class="feature-grid">
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#409EFF">
                                <Box />
                            </el-icon>
                            <h4>原料管理</h4>
                            <p>管理原材料清单和库存</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#67C23A">
                                <Document />
                            </el-icon>
                            <h4>BOM管理</h4>
                            <p>产品物料清单信息管理</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#E6A23C">
                                <Operation />
                            </el-icon>
                            <h4>生产管理</h4>
                            <p>生产大屏、订单、计划、工单</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#F56C6C">
                                <Tools />
                            </el-icon>
                            <h4>工艺工序管理</h4>
                            <p>工艺流程和工序管理</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#9C27B0">
                                <Medal />
                            </el-icon>
                            <h4>质检管理</h4>
                            <p>原料质检、方案、复检管理</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#FF9800">
                                <Monitor />
                            </el-icon>
                            <h4>车间机床管理</h4>
                            <p>车间信息和机床设备管理</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#795548">
                                <User />
                            </el-icon>
                            <h4>工人工时管理</h4>
                            <p>工人信息和工时记录管理</p>
                        </el-card>
                        <el-card class="feature-card" shadow="hover">
                            <el-icon class="feature-icon" color="#607D8B">
                                <Setting />
                            </el-icon>
                            <h4>系统管理</h4>
                            <p>用户、角色、权限配置</p>
                        </el-card>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    Operation,
    Medal,
    Tools,
    Box,
    Document,
    Monitor,
    User,
    Setting
} from '@element-plus/icons-vue'
</script>

<style scoped>
.default-content {
    padding: 20px;
}

.welcome-card {
    max-width: 800px;
    margin: 0 auto;
}

.card-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}

.welcome-content {
    text-align: center;
}

.welcome-content p {
    font-size: 16px;
    color: #606266;
    margin-bottom: 30px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 30px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.feature-card h4 {
    margin: 10px 0;
    color: #303133;
    font-size: 16px;
}

.feature-card p {
    color: #909399;
    font-size: 14px;
    margin: 0;
}
</style>
